﻿<template>
    <div>
        <el-form label-width="150px" :model="UpUsageRecordDB" :rules="rules"   ref="UpUsageRecordDB_refs">
            <el-row>
                <el-col :span="10" :offset="1">
                    <el-form-item label="请选择使用人" prop="UserId">
                        <el-select placeholder="请选择使用人" v-model="UpUsageRecordDB.UserId" filterable style="width:100%">
                            <el-option :value="0" label="请选择使用人"></el-option>
                            <el-option v-for="v in $store.state.AllUsers" v-if="v.InternshipState!=8" :label="v.UserName" :value="v.Id+''"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="10" :offset="1">
                    <el-form-item label="汽车品牌" prop="CarId">
                        <el-select placeholder="汽车品牌" v-model="UpUsageRecordDB.CarId" filterable style="width:100%" disabled>
                            <el-option :value="0" label="汽车品牌"></el-option>
                            <el-option v-for="(v,k) in AllVehicle" :value="v.Id" :data-userid="v.Id" :label="v.CareName" v-text="v.CareName" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="10" :offset="1">
                    <el-form-item label="使用部门"  >
                        <el-select placeholder="使用部门" v-model="UpUsageRecordDB.DepartmentId" filterable style="width:100%">
                            <el-option :value="0" label="使用部门"></el-option>
                            <el-option v-for="v in AllDepartment" :label="v.DepartmentName" :value="v.Id"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="10" :offset="1">
                    <el-form-item label="出车时间" prop="PurchaseDate">
                        <el-date-picker v-model="UpUsageRecordDB.StartTime"
                                        class="wmax"
                                        style=" width: 100%;"
                                        type="date"
                                        placeholder="出车时间">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="10" :offset="1">
                    <el-form-item label="还车时间" prop="EndTime">
                        <el-date-picker v-model="UpUsageRecordDB.EndTime"
                                        class="wmax"
                                        style=" width: 100%;"
                                        type="date"
                                        placeholder="还车时间">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="10" :offset="1">
                    <el-form-item label="是否违章" prop="PurchaseDate">
                        <el-select v-model="UpUsageRecordDB.ViolationsYN"   @change="ViolationsYNchangeFc"  filterable required placeholder="请选择是否违章" style="width: 100%">
                            <el-option :value="0" label="请选择是否违章">--请选择是否违章--</el-option>
                            <el-option :value="1" label="已违章">--已违章--</el-option>
                            <el-option :value="2" label="未违章">--未违章--</el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>



            <el-row>
                <el-col :span="10" :offset="1">
                    <el-form-item label="始发地" prop="StartAddress">
                        <el-input v-model="UpUsageRecordDB.StartAddress"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="10" :offset="1">
                    <el-form-item label="目的地" prop="Destination">
                        <el-input v-model="UpUsageRecordDB.Destination"></el-input>
                    </el-form-item>
                </el-col>

            </el-row>

            <el-row>
                <el-col :span="10" :offset="1">
                    <el-form-item label="项目使用二选一"  >
                        <el-select placeholder="项目使用" v-model="projecttype1" @change="projecttypeFc(1)" filterable style="width:100%">
                            <el-option :value="0" label="项目使用"></el-option>
                            <el-option v-for="v in AllProject" :label="v.ProjectName" :value="v.ProjectName"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>

                <el-col :span="10" :offset="1">
                    <el-form-item label="项目使用二选一" >
                        <el-input v-model="projecttype2" @change="projecttypeFc(2)"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>





            <el-row>
                <el-col :span="10" :offset="1">
                    <el-form-item label="用车事由" prop="ReasonCar">
                        <el-input v-model="UpUsageRecordDB.ReasonCar"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="10" :offset="1">
                    <el-form-item label="停车费/过路费" prop="WorkingCost">
                        <el-input v-model.number="UpUsageRecordDB.WorkingCost"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>



            <el-row>
                <el-col :span="10" :offset="1">
                    <el-form-item label="里程止数" prop="MileageEnd">
                        <el-input v-model="UpUsageRecordDB.MileageEnd" @change="MileageEndFc"    ></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="10" :offset="1">
                    <el-form-item label="车辆状态" prop="RentId">
                        <el-select v-model="UpUsageRecordDB.State" filterable required placeholder="车辆状态" style="width: 100%">
                            <el-option value=""  label="好">--好--</el-option>
                            <el-option value="1" label="良好">--良好--</el-option>
                            <el-option value="2" label="损坏">--损坏--</el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>


            <!--违章详情-->
            <div :style="Violationobj">
                <el-divider content-position="left"><h3>违章详情</h3></el-divider>
                <el-row>
                    <el-col :span="10" :offset="1">
                        <el-form-item label="违章时间" prop="MileageEnd">
                            <el-date-picker v-model="UpUsageRecordDB.ViolationsDate"
                                            class="wmax"
                                            style=" width: 100%;"
                                            type="date"
                                            placeholder="违章时间">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10" :offset="1">
                        <el-form-item label="预计处理日期" prop="MileageEnd">
                            <el-date-picker v-model="UpUsageRecordDB.EstimatedProcessingDate"
                                            class="wmax"
                                            style=" width: 100%;"
                                            type="date"
                                            placeholder="预计处理日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>


                <el-row>
                    <el-col :span="10" :offset="1">
                        <el-form-item label="违章方式" prop="ViolationsWay">
                            <el-input v-model="UpUsageRecordDB.ViolationsWay"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10" :offset="1">
                        <el-form-item label="扣分" prop="Penalize">
                            <el-input v-model.number="UpUsageRecordDB.Penalize"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="10" :offset="1">
                        <el-form-item label="罚款" prop="Fine">
                            <el-input v-model.number="UpUsageRecordDB.Fine"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10" :offset="1">
                        <el-form-item label="责任人" prop="Penalize">
                            <el-select placeholder="请选择责任人" v-model="UpUsageRecordDB.PersonLiableId" filterable style="width:100%">
                                <el-option :value="0" label="请选择责任人"></el-option>
                                <el-option v-for="v in $store.state.AllUsers" :label="v.UserName" :value="v.Id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>



                <el-row>
                    <el-col :span="10" :offset="1">
                        <el-form-item label="当前状态" prop="CurrentState">
                            <el-select v-model="UpUsageRecordDB.CurrentState" filterable required placeholder="当前状态" style="width: 100%">
                                <el-option :value="0"  label="当前状态">--当前状态--</el-option>
                                <el-option :value="1" label="已处理">--已处理--</el-option>
                                <el-option :value="2" label="暂未处理">--暂未处理--</el-option>
                            </el-select>

                        </el-form-item>
                    </el-col>
                    <el-col :span="10" :offset="1">
                        <el-form-item label="违章路段" prop="ViolationsAddress">
                            <el-input v-model="UpUsageRecordDB.ViolationsAddress"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </div> 

            <el-row>
                <el-col :span="10" :offset="1">
                    <h2>上传图片信息</h2>
                    <el-form-item label="上传图片信息"  >
                        <UploadFileF ref="AnotherData"
                                     :multiple="false"
                                     :another-data="AnotherData"
                                     :showfilelist="true"
                                     :upshow="false"
                                     content="上传图片信息"
                                     btnsize="medium"></UploadFileF>
                    </el-form-item>
                </el-col>
            </el-row>




            <el-row>
                <el-col align="center">
                    <el-button type="success" @click="UpUsageRecordDBSave">修改汽车使用记录</el-button>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>
<script>
    import * as publicjs from "/public/Scriput/Public"
    import UploadFileF from "../../UploadFileF";

    export default {
        name: "UpUsageRecord",
        components: {
            UploadFileF,
        },
        watch: {
            UpUsageRecordDB: function (val) {
                this.projecttype1 = val.ProjectName;
                this.projecttype2 = val.ProjectName;
                this.$refs['AnotherData'].fileList = [];

                this.ViolationsYNchangeFc();
            }
        },
        props: {
            AllProject: {
                type: Array,
                required: true
            },
            AllVehicle: {
                type: Array,
                required: true
            },
            AllDepartment: {
                type: Array,
                required: true
            },
            UpUsageRecordDB: {
                type: Object,
                required: true
            },
        },
        data() {
            return {
                rules: {
                    MileageEnd: [
                        { required: true, message: '请输入里程止数', trigger: 'blur' },
                    ],
                },
                projecttype1: '',
                projecttype2: '',
                //文件上传参数
                AnotherData: {
                    FileType: 64,
                    id: 2,
                    Type: 0,
                    Single: false,
                },
                Violationobj: {
                    display: "none"
                },
            }
        },
        methods: {
            UpUsageRecordDBSave() {
                console.log(this.UpUsageRecordDB);
                let loadding = this.openLoading();
                this.$http.post("VehicleManagement/UsageRecordUpdate", { usageRecord: this.UpUsageRecordDB })
                    .then(res => {
                        loadding.close();
                        if (res.data.bol) {
                            if (this.$refs['AnotherData'].fileList.length > 0) {
                                this.AnotherData.Type = this.UpUsageRecordDB.Id;
                                this.$refs['AnotherData'].submitUpload()
                            }
                            this.$message.success("数据信息修改成功");
                            this.$parent.$parent.UpUsageRecordShow = false;
                            this.$parent.$parent.GettableDB();
                        } else {
                            this.$message.error("数据信息修改失败")
                        }
                    });
            },
            projecttypeFc(id) {
                if (id == 1) {
                    this.projecttype2 = '';
                    this.UpUsageRecordDB.ProjectName = this.projecttype1;
                } else {
                    this.projecttype1 = '';
                    this.UpUsageRecordDB.ProjectName = this.projecttype2;
                }
                console.log(this.UpUsageRecordDB.ProjectName)
            },
            ViolationsYNchangeFc() {
                this.UpUsageRecordDB.ViolationsYN != 1 ? this.Violationobj.display = "none" : this.Violationobj.display = "block";
            },
            MileageEndFc() {
                if (parseFloat(this.UpUsageRecordDB.MileageEnd) < parseFloat(this.UpUsageRecordDB.MileageStart)) {
                    this.$message.error("里程止数不能小于开始数")
                    this.UpUsageRecordDB.MileageEnd = "";
                }

            }
        },
    }
</script>
<style>
    .wmax {
        width: 100%;
    }

    .newinput {
        position: absolute;
        z-index: 2;
        width: 80%;
        border-right: 0px;
    }
</style>
